<!DOCTYPE html>  
<html>  
    <head>  
    <meta charset="UTF-8">  
    <title>单选框应用</title> 
    <script src="http://hsjdtech.com/inter/scripts/jquery-1.11.1.min.js" type="text/javascript"></script> 
    <style type="text/css">   
        .elementRadio {margin-top:10px;width: 20px;height: 20px;line-height: 40px;cursor: pointer;border:  1px solid #ccc;float:left;}
        .elementSpan {display:block;height:20px;cursor: pointer;float:left;}
    </style>  
    <script type="text/ecmascript">  
        $(document).ready(function () {
            $(".checkBtn").append(showBtn('查询', '70px', '22px', '#2D90CB', '#2380C3', '#fff', '#fff', 'query()'));
            //单选按钮
            $(".elementSpan").click(function () {//点击文字触发
                $(".elementSpan").css("color", "black");
                $(this).parent("div").children("input", "class='elementRadio'").prop("checked", true);
                $(this).css("color", "red");
                //执行动作;
            });
            $(".elementRadio").click(function () {//点击按钮触发
                $(".elementSpan").css("color", "black");
                $(this).parent("div").children("span", "class='elementSpan'").css("color", "red");
                //执行动作;
            });
            //单选按钮改变事件
            $('input[type=radio][name=elementRadio]').change(function () {
                    alert(this.value);
            });
        });
        function query() {
            var selectElement = $(".elementRadio[name='elementRadio']:checked").val();
            alert(selectElement);
        }
        /*text:按钮文字,width:按钮宽度,height:按钮高度,backgroud:按钮背景色,borderColor:按钮边框色,myFunction:按钮执行函数,color 文字颜色,oncolor 鼠标经过时文字颜色
        eg:
         $(".checkBtn").append(showBtn('查询', '70px', '22px', '#2D90CB', '#2380C3','#fff','#fff', 'checkForm()'));
          $(".deleteBtn").append(showBtn('删除', '70px', '22px', '#FF6600', '#FF3300', '#fff','#fff','deleteForm()'));
          $(".toExcelBtn").append(showBtn('关注', '70px', '22px', '#E1F4E1', '#D3ECBD', '#5CB43F', '#f69626', 'deleteForm()'));
        */
        function showBtn(text, width, height, backgroud, borderColor, color, oncolor, myFunction) {
            return "<input type=\"button\" value=\"" + text + "\" onclick=\"" + myFunction + "\" style=\"float: left; height: " + height + ";\
    padding: 0px; line-height: " + height + "; width: " + width + "; margin-left: 20px; cursor: pointer;\
    text-align: center; color: "+ color + "; background-color: " + backgroud + ";\
    border: 1px solid " + borderColor + ";\" onmousemove=\"this.style.color='" + oncolor + "'\" onmouseout=\"this.style.color='" + color + "'\"/>";
        }
    </script>  
    </head>  
    <body>  
        <div id="dataSrc" style="height: 40px; width: 100%; float: left;">
            <div style="height: 40px; line-height: 40px; float: left;">数据源：</div>
            <div style="height: 40px; line-height: 40px; float: left;  margin-left: 15px;">
                <input name="elementRadio" checked="checked" type="radio" class="elementRadio" value="0"  />
                <span class="elementSpan" style="color: red;">按年份</span>
            </div>
            <div style="height: 40px; line-height: 40px; float: left;margin-left: 15px;">
                <input name="elementRadio" type="radio" class="elementRadio" value="1" />
                <span class="elementSpan">按区域</span>
            </div>
            <div style="height: 40px; line-height: 40px; float: left; margin-left: 15px;">
                <input name="elementRadio" type="radio" class="elementRadio" value="2" />
                <span class="elementSpan">按产业</span>
            </div>
            <div class="checkBtn" style="margin-top:10px;"></div>
        </div>
    </body>  
</html>  